<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="isEdit ? '修改菜单' : '新增菜单'"
    width="800px"
    :visible.sync="visible"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="140px">
      <el-form-item label="上级菜单">
        <menu-select
          :disabled="parentSelect"
          ref="menuSelect"
          class="fl w420 mr20"
          :selectValue="form.parentId"
          v-model="form.parentId"
          @select="handleDeptSelect"
        />
        <el-checkbox v-model="parentSelect" @change="checkChange">顶级菜单</el-checkbox>
      </el-form-item>

      <el-divider />

      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          type="text"
          clearable
          :disabled="quick ? true : false"
          autocomplete="false"
          placeholder="请输入菜单名称"
          v-model="form.menuName"
        />
      </el-form-item>
      <el-form-item label="显示名称" prop="showName">
        <el-input
          type="text"
          clearable
          autocomplete="false"
          placeholder="请输入显示名称"
          v-model="form.showName"
        />
      </el-form-item>
      <el-form-item label="ICO图标" prop="ico">
        <el-select v-model="form.ico" clearable>
          <el-option v-for="(item,index) in icons" :key="index" :value="item">
            <a-icon :type="item" :style="{ fontSize: '24px' }" />
          </el-option>
        </el-select>
        <!-- <el-input type="text" autocomplete="false" placeholder="请输入ICO" v-model="form.ico" /> -->
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input type="text" placeholder="请输入URL" v-model="form.url" />
      </el-form-item>
      <el-form-item label="排序" prop="menuOrder">
        <el-input-number
          :min="0"
          :max="100"
          placeholder="请输入排序值"
          v-model="form.menuOrder"
          clearable
        />
      </el-form-item>
      <el-form-item label="新页面打开" prop="target" v-if="!quick">
        <el-radio-group v-model="form.target" size="small">
          <el-radio-button label="_target">是</el-radio-button>
          <el-radio-button label="_self">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示" prop="hidden" v-if="!quick">
        <el-radio-group v-model="form.hidden" size="small">
          <el-radio-button :label="false">是</el-radio-button>
          <el-radio-button :label="true">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="缓存页面" prop="keepAlive" v-if="!quick">
        <el-radio-group v-model="form.keepAlive" size="small">
          <el-radio-button :label="true">是</el-radio-button>
          <el-radio-button :label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="二级菜单且存在下级" prop="hasChild">
        <el-radio-group v-model="form.hasChild" size="small" :disabled="!form.parentId">
          <el-radio-button :label="true">是</el-radio-button>
          <el-radio-button :label="false">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="state" v-if="!quick">
        <el-select clearable placeholder="请选择状态" v-model="form.state">
          <el-option :value="0" label="正常"></el-option>
          <el-option :value="1" label="废止"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数">
        <el-row class="mb10" :gutter="16" v-for="(item,index) in colObj" :key="index">
          <el-col :class="[ index !== 0 ? 'ml8' : '' ]" :span="10" style="display:flex">
            <span>键：</span>
            <el-input v-model="item.key" :disabled="quick ? true : false" />
          </el-col>
          <el-col :span="10" style="display:flex">
            <span>值：</span>
            <el-input type="text" v-model="item.value" />
          </el-col>
          <el-col :span="3" v-if="!quick">
            <el-button @click="handleRemoveCol(item)" circle icon="el-icon-minus" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-button
        v-if="!quick"
        style="margin-left: 79px"
        class="mb20"
        @click="handleAddCol"
        circle
        icon="el-icon-plus"
      ></el-button>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        @click="handleOk"
        type="primary"
        :loading="btnSubmitLoading"
      >{{ isEdit ? '修改' : '新增' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateMenu, insertMenu } from '@/api/menu'
import { openNotification } from '@/utils/util'
import MenuSelect from './MenuSelect'
import icons from './icons'

export default {
  components: {
    MenuSelect
  },
  data() {
    return {
      visible: false,
      btnSubmitLoading: false,
      isEdit: false,
      colObj: [{ id: 1, key: null, value: null }],
      form: {
        menuName: null,
        ico: null,
        url: null,
        menuOrder: 0,
        state: 0
      },
      rules: {
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        showName: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
        url: [{ required: true, message: '请输入url', trigger: 'blur' }],
        menuOrder: [
          { required: true, message: '请输入排序值', trigger: 'blur' },
          { type: 'number', message: '排序值为数字类型', trigger: 'blur' }
        ],
        state: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      confirmLoading: false,
      parentSelect: true,
      icons,
      quick: false, // 快速新增
      mdl: {} // 暂存编辑和新增传递过来的对象
    }
  },
  methods: {
    handleAddCol() {
      this.colObj.push({
        id: this.colObj.length + 1,
        key: null,
        value: null
      })
    },
    handleRemoveCol(item) {
      const index = this.colObj.findIndex(v => v.id === item.id)
      this.colObj.splice(index, 1)
    },
    handleDeptSelect(value) {
      console.log('value', value, value.id.indexOf('003'), value.id.length)
      if (value.id.indexOf('003') >= 0) {
        // 管理权力防控的情况
        if (value.id.length === 3) {
          // 增加二级
          this.$set(this.form, 'menuName', 'bpmn' + new Date().getTime())
          this.$set(this.form, 'url', '/bpmn' + new Date().getTime())
        } else {
          // 增加三级
          this.$set(this.form, 'menuName', 'workflow' + new Date().getTime())
          this.$set(this.form, 'url', '/bpmn/process/procdefId=' + new Date().getTime())
        }
      }
      this.$set(this.form, 'parentId', value.key)
    },
    checkChange(e) {
      console.log('e', e)
      if (e) {
        this.reset()
      } else {
        if (this.mdl.parentId) {
          this.$set(this.form, 'parentId', this.mdl.parentId)
        }
        this.parentSelect = false
      }
    },
    reset() {
      this.$nextTick(() => {
        this.$set(this.form, 'parentId', null)
        this.$refs.menuSelect.reset()
        this.parentSelect = true
      })
    },
    edit(bool, record, quick = false) {
      this.quick = quick
      this.isEdit = bool
      this.form = Object.assign({}, record)
      this.mdl = Object.assign({}, record)
      if (!record.parentId) {
        this.reset()
      } else {
        this.parentSelect = false
      }
      this.visible = true
      if (!bool) {
        this.$set(this.form, 'menuOrder', 0)
        if (this.quick) {
          this.form.menuName = 'process'
          this.colObj[0].key = 'definitionKey'
          // this.$set(this.form, 'target', '_blank')
        } else {
          this.$set(this.form, 'target', '_self')
        }
        this.$set(this.form, 'hidden', false)
        this.$set(this.form, 'keepAlive', false)
        this.$set(this.form, 'hasChild', false)
        this.$set(this.form, 'state', 0)
      } else {
        const obj = Object.assign({}, JSON.parse(record.ext))
        console.log('edit', obj)

        this.$set(this.form, 'showName', obj.title)
        this.$set(this.form, 'hidden', obj.hidden)
        this.$set(this.form, 'keepAlive', obj.keepAlive)
        this.$set(this.form, 'target', obj.target)
        this.$set(this.form, 'hasChild', obj.hasChild)
        if (obj.query && Object.keys(obj.query) && Object.keys(obj.query).length) {
          this.colObj = []
          for (let key in obj.query) {
            const item = { key, value: obj.query[key] }
            this.colObj.push(item)
          }
        }
      }
    },
    async handleOk(e) {
      e.stopPropagation()
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res = '',
            mes = ''
          let ext = {}
          if (this.colObj.length > 0) {
            let query = {}
            this.colObj.map(v => {
              if (v.key && v.value) {
                query[v.key] = v.value
              }
            })
            if (JSON.stringify(query) !== '{}') {
              ext.query = query
            }
          }
          if (!this.form.parentId) {
            ext.component = 'PageView'
          } else if (this.form.parentId && this.form.hasChild) {
            ext.component = 'RouteView'
          }
          // else if (this.form.parentId && !this.form.hasChild && this.form.menuName === 'process') {
          //   ext.component = 'process'
          // }
          else {
            ext.component = this.form.menuName
          }
          ext.title = this.form.showName
          ext.hidden = this.form.hidden
          ext.keepAlive = this.form.keepAlive
          ext.target = this.form.target
          ext.hasChild = this.form.hasChild
          // ext.keepAlive = true
          if (this.form.ico) {
            ext.icon = this.form.ico
          }
          this.$set(this.form, 'ext', JSON.stringify(ext))
          console.log('form', this.form)

          if (this.isEdit) {
            res = await updateMenu(this.form)
            mes = '修改操作成功'
          } else {
            res = await insertMenu(this.form)
            mes = '新增操作成功'
          }
          if (res.state === '000000') {
            openNotification('success', mes)
            this.visible = false
            this.$emit('refresh')
            this.$refs.menuSelect.getMenuTree()
            this.colObj = [{ id: 1, key: null, value: null }]
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.w420 {
  width: 400px !important;
}

.ml8 {
  margin-left: 8px;
}

.el-select-dropdown .el-select-dropdown__item {
  text-align: center;
}
</style>
